{% extends "finance/base.html" %}
{% load static %}
{% load custom_filters %}

{% block content %}
<style>
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .add-button {
        background-color: rgb(80, 90, 97);
        color: white;
        border: none;
    }

    .add-button:hover {
        background-color: rgb(70, 80, 87);
        color: white;
    }

    .table-container {
        overflow-x: auto;
        margin-top: 1rem;
    }

    .center-label {
        display: block;
        width: 100%;
        text-align: center;
    }
</style>

<div class="d-flex justify-content-between align-items-center" style="padding: 1rem;">
    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">Contracts</h2>
    <input type="text" id="searchInput" class="form-control" placeholder="Search Contract No..."
        style="max-width: 300px; margin-right: 1rem;">
    <div>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#contractsModal"
            onclick="resetForm()">
            Add Contract No
        </button>
        <a href="{% url 'generate_pdf_contracts' %}" class="btn btn-secondary">
            Generate PDF Report
        </a>
        <a href="{% url 'export_to_excel_contracts' %}" class="btn btn-secondary">Export to Excel</a>
    </div>

</div>

<div class="table-container with-bottom-padding">
    <table class="table table-striped table-hover" id="contractsTable">
        <thead class="table-dark">
            <tr>
                <th scope="col" class="align-middle">No</th>
                <th scope="col" class="align-middle">Vendor Code</th>
                <th scope="col" class="align-middle">Name</th>
                <th scope="col" class="align-middle">Contract Type</th>
                <th scope="col" class="align-middle">Contract No</th>
                <th scope="col" class="align-middle">Date</th>
                <th scope="col" class="align-middle">Title</th>
                <th scope="col" class="align-middle">MSR No.</th>
                <!-- <th scope="col" class="align-middle">Period</th>
                <th scope="col" class="align-middle">Until</th> -->
                <th scope="col" class="align-middle">Currency</th>
                <th scope="col" class="align-middle">Contract Amount</th>
                <th scope="col" class="align-middle">Add. Amount</th>
                <th scope="col" class="align-middle">Bank Acct#</th>
                <th scope="col" class="align-middle">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if contracts %}
            {% for contractno in contracts %}
            <tr data-id="{{ contractno.id }}" data-vendorcode="{{ contractno.vendorcode.vendorcode }}"
                data-vendorname="{{ contractno.vendorcode.vendorname }}"
                data-contractdate="{{ contractno.contractdate|date:'Y-m-d' }}" data-contractno="{{ contractno.contractno }}"
                data-contracttype="{{ contractno.contracttype }}" data-title="{{ contractno.title }}"
                data-nosrmr="{{ contractno.nosrmr }}" data-period1="{{ contractno.period1|date:'Y-m-d' }}"
                data-period2="{{ contractno.period2|date:'Y-m-d' }}"
                data-currsign="{% if contractno.currsign %}{{ contractno.currsign.currsign }}{% else %}{% endif %}"
                data-orgamt="{{ contractno.orgamt }}" data-addendumamt="{{ contractno.addendumamt }}"
                data-accountno="{{ contractno.accountno.accountno|default_if_none:'' }}">


                <td>{{ forloop.counter }}</td> <!-- Added row number -->
                <td>
                    {{ contractno.vendorcode.vendorcode }}
                </td>
                <td>
                    {{ contractno.vendorcode.vendorname }}
                </td>
                <td>{{ contractno.contracttype }}</td>
                <td>{{ contractno.contractno }}</td>
                <td>{{ contractno.contractdate|date:"d-m-Y" }}</td>
                <td>{{ contractno.title }}</td>
                <td>{{ contractno.nosrmr }}</td>
                <td>
                    {% if contractno.currsign %}
                        {{ contractno.currsign.currsign }}
                    {% else %}
                        -
                    {% endif %}
                </td>                
                <td>
                    {% if contractno.currsign %}
                        {{ contractno.orgamt|format_currency_dynamic:contractno.currsign.currsign }}
                    {% else %}
                        {{ contractno.orgamt }}
                    {% endif %}
                </td>
                <td>
                    {% if contractno.currsign %}
                        {{ contractno.addendumamt|format_currency_dynamic:contractno.currsign.currsign }}
                    {% else %}
                        {{ contractno.addendumamt }}
                    {% endif %}
                </td>
                <td>{{ contractno.accountno.accountno }}</td>

                <td>
                    <div class="d-flex gap-1">
                        <button type="button" class="btn btn-sm btn-secondary"
                            onclick="editcontracts('{{ contractno.id }}')">
                            <i class="bi bi-pencil-square"></i>
                        </button>
                        <form method="POST" action="{% url 'delete_contracts' contractno.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm btn-danger"
                                onclick="return confirm('Are you sure you want to delete this Contract No?')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td colspan="7" class="text-center">No Contract No. found</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

<script>
    document.getElementById('searchInput').addEventListener('keyup', function () {
        let filter = this.value.toLowerCase();
        let rows = document.querySelectorAll('#contractsTable tbody tr');

        rows.forEach(row => {
            let text = row.textContent.toLowerCase();
            row.style.display = text.includes(filter) ? '' : 'none';
        });
    });
    // function editcontracts(contractsId) {
    //     document.getElementById('contractsModalLabel').innerText = 'Edit Cotract No';
    //     document.getElementById('contractsForm').action = "{% url 'edit_contracts' 0 %}".replace('0', contractsId);

    //     const row = document.querySelector(`tr[data-id="${contractsId}"]`);
    //     if (row) {
    //         document.getElementById('contracts_id').value = contractsId;
    //         document.getElementById('vendorcode').value = row.dataset.vendorcode;
    //         document.getElementById('vendorcode').dispatchEvent(new Event('change'));
    //         document.getElementById('contracttype').value = row.dataset.contracttype;
    //         document.getElementById('contractno').value = row.dataset.contractno;
    //         document.getElementById('contractdate').value = row.dataset.contractdate;
    //         document.getElementById('title').value = row.dataset.title;
    //         document.getElementById('nosrmr').value = row.dataset.nosrmr;
    //         document.getElementById('period1').value = row.dataset.period1;
    //         document.getElementById('period2').value = row.dataset.period2;
    //         document.getElementById('currsign').value = row.dataset.currsign;
    //         document.getElementById('orgamt').value = row.dataset.orgamt;
    //         document.getElementById('addendumamt').value = row.dataset.addendumamt;
    //         document.getElementById('accountno').value = row.dataset.accountno;
    //     }

    //     const contractsModal = new bootstrap.Modal(document.getElementById('contractsModal'));
    //     contractsModal.show();
    // }       
</script>


<!-- contracts Modal -->
<div class="modal fade" id="contractsModal" tabindex="-1" aria-labelledby="contractsModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="contractsModalLabel">Add Contract No</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="contractsForm" method="POST" action="{% url 'save_contracts' %}">
                    {% csrf_token %}
                    <input type="hidden" name="contracts_id" id="contracts_id">

                    <select class="form-control" id="vendorcode" name="vendorcode" required>
                        <option value="">-- Select Vendor Code --</option>
                        {% for v in vendor %}
                        <option value="{{ v.vendorcode }}">{{ v.vendorcode }} - {{ v.vendorname }}</option>
                        {% endfor %}
                    </select>
                    <div class="mb-3">
                        <label for="contracttype" class="form-label">Contract Type</label>
                        <select class="form-control" id="contracttype" name="contracttype" required>
                            <option value="">-- Select Type --</option>
                            <option value="NC">NC</option>
                            <option value="Goods">Goods</option>
                            <option value="Service">Service</option>
                        </select>

                    </div>
                    <div class="mb-3">
                        <label for="contractno" class="form-label">Contract No</label>
                        <input type="text" class="form-control" id="contractno" name="contractno" required>
                    </div>
                    <div class="mb-3">
                        <label for="contractdate" class="form-label">Date</label>
                        <input type="date" class="form-control" id="contractdate" name="contractdate" required>
                    </div>
                    <div class="mb-3">
                        <label for="title" class="form-label">Title</label>
                        <input type="text" class="form-control" id="title" name="title" required>
                    </div>
                    <div class="mb-3">
                        <label for="nosrmr" class="form-label">MSR No</label>
                        <input type="text" class="form-control" id="nosrmr" name="nosrmr" required>
                    </div>
                    <div class="mb-3">
                        <label for="period1" class="form-label">Period</label>
                        <input type="date" class="form-control" id="period1" name="period1" required>
                    </div>
                    <div class="mb-3">
                        <label for="period2" class="form-label">Until</label>
                        <input type="date" class="form-control" id="period2" name="period2" required>
                    </div>
                    <div class="mb-3">
                        <label for="currsign" class="form-label">Currency</label>
                        <select class="form-control" id="currsign" name="currsign" required>
                            <option value="">-- Select Currency --</option>
                            {% for curr in matauangs %}
                            <option value="{{ curr.currsign }}">{{ curr.currsign }} - {{ curr.currname }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="orgamt" class="form-label">Contract Amount</label>
                        <input type="text" class="form-control currency-input" id="orgamt" name="orgamt" required>
                    </div>
                    <div class="mb-3">
                        <label for="addendumamt" class="form-label">Add. Amount</label>
                        <input type="text" class="form-control currency-input" id="addendumamt" name="addendumamt" required>
                    </div>
                    <div class="mb-3">
                        <label for="accountno" class="form-label">Bank Acct#</label>
                        <select class="form-control" id="accountno" name="accountno" required>
                            <option value="">-- Select Bank Account No --</option>
                            {% for bankno in vendordtl %}
                            <option value="{{ bankno.accountno }}" data-vendor="{{ bankno.vendordtl.vendorcode }}">
                                {{ bankno.bankcode }} - {{ bankno.accountno }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        const vendorSelect = document.getElementById('vendorcode');
        const accountSelect = document.getElementById('accountno');

        function filterAccountOptions(selectedVendor, selectedAccount = '') {
            const accountOptions = accountSelect.querySelectorAll('option');
            let foundMatch = false;

            accountOptions.forEach(option => {
                if (option.value === "") {
                    option.hidden = false;
                    return;
                }

                const vendorMatch = option.getAttribute('data-vendor') === selectedVendor;
                option.hidden = !vendorMatch;

                if (vendorMatch && option.value === selectedAccount) {
                    foundMatch = true;
                }
            });

            if (selectedAccount && foundMatch) {
                accountSelect.value = selectedAccount;
            } else {
                accountSelect.value = "";
            }
        }

        vendorSelect.addEventListener('change', function () {
            filterAccountOptions(this.value);
        });

        window.editcontracts = function (contractsId) {
            console.log("Opening modal for contract ID:", contractsId);
            document.getElementById('contractsModalLabel').innerText = 'Edit Contract No';
            document.getElementById('contractsForm').action = "{% url 'edit_contracts' 0 %}".replace('0', contractsId);

            const row = document.querySelector(`tr[data-id="${contractsId}"]`);
            if (row) {
                const vendorcode = row.dataset.vendorcode;
                const accountno = row.dataset.accountno;

                document.getElementById('contracts_id').value = contractsId;
                vendorSelect.value = vendorcode;
                filterAccountOptions(vendorcode, accountno);

                document.getElementById('contracttype').value = row.dataset.contracttype;
                document.getElementById('contractno').value = row.dataset.contractno;
                document.getElementById('contractdate').value = row.dataset.contractdate;
                document.getElementById('title').value = row.dataset.title;
                document.getElementById('nosrmr').value = row.dataset.nosrmr;
                document.getElementById('period1').value = row.dataset.period1;
                document.getElementById('period2').value = row.dataset.period2;
                document.getElementById('currsign').value = row.dataset.currsign;
                document.getElementById('orgamt').value = row.dataset.orgamt;
                document.getElementById('addendumamt').value = row.dataset.addendumamt;
            }

            const contractsModal = new bootstrap.Modal(document.getElementById('contractsModal'));
            contractsModal.show();
        };
    });
</script>

<script>
    function resetForm() {
        // Reset form values
        document.getElementById('contractsForm').reset();

        // Reset action to add URL
        document.getElementById('contractsForm').action = "{% url 'save_contracts' %}";

        // Set modal title to Add
        document.getElementById('contractsModalLabel').innerText = 'Add Contract No';

        // Reset hidden ID
        document.getElementById('contracts_id').value = "";

        // Reset dropdowns
        document.getElementById('vendorcode').value = "";
        document.getElementById('currsign').value = "";
        document.getElementById('accountno').value = "";

        // Optional: re-filter accountno if needed
        filterAccountOptions(""); // to hide all accountno options
    }
</script>

<script>
    // Format ribuan saat user mengetik
    function formatNumber(num) {
        return num.replace(/\D/g, '')
                  .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    function formatCurrencyInput(input) {
        let value = input.value.replace(/,/g, '');
        if (!isNaN(value) && value !== "") {
            input.value = parseFloat(value).toLocaleString('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }
    }

    // Apply formatting as user types
    document.querySelectorAll('.currency-input').forEach(input => {
        input.addEventListener('input', () => {
            let val = input.value.replace(/[^0-9.]/g, '');
            input.value = val.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        });
    });

    // Sebelum submit: buang koma biar bisa disimpan sebagai angka
    document.getElementById('contractsForm').addEventListener('submit', function () {
        document.querySelectorAll('.currency-input').forEach(input => {
            input.value = input.value.replace(/,/g, '');
        });
    });
</script>


{% endblock %}